<%@ include file="../include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="modal-body">
    <div class="row">
        <button type="button" class="btn btn-theme04"
                onclick="del(${sysRole.id});">删除角色
        </button>
        <button type="button" class="btn btn-theme" id="searchSubmit"
                onclick="edit(${sysRole.id});">修改角色
        </button>
        <button type="button" class="btn btn-theme02"
                onclick="$('#editForm input').val('');$('#pid').val(${sysRole.id});$('#pid_tip').css('color','green');$('#pid_tip').html(' * 新增 *');">
            添加角色
        </button>
        <button type="button" class="btn btn-theme03"
                onclick="getMenus(${sysRole.id});">
            菜单权限
        </button>
    </div>
    <br>
    <div class="row" id="role_form_data">
        <form id="editForm" class="form-horizontal style-form">
            <input type="hidden" value="${sysRole.id}" name="id" id="id"/>
            <div class="form-group">
                <label class="col-sm-2 control-label">父节点PID</label>
                <div class="col-sm-6">
                    <input placeholder="" type="text" name="pid" id="pid"
                           value="${sysRole.pid}"
                           readonly maxlength="11"/>
                    <label><p id="pid_tip" style="color: red;"> * 修改 * </p></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">角色名称</label>
                <div class="col-sm-6">
                    <input type="text" name="roleName" value="${sysRole.roleName}" maxlength="11"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">同级排序</label>
                <div class="col-sm-6">
                    <input type="text" name="sort" value="${sysRole.sort}" maxlength="11"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">备注</label>
                <div class="col-sm-8">
                <textarea class="form-control"
                          value="${sysRole.note}"
                          name="note">${sysRole.note}</textarea>
                </div>
            </div>
        </form>
        <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button" id="cancelBtn">取消</button>
            <button class="btn btn-theme" type="button" id="saveBtn">保存</button>
        </div>
    </div>
</div>

<!-- modal -->
<script type="text/javascript">
    $(function () {
        $("#saveBtn").bind("click", function () {
            var data = $("#editForm").serializeArray();
            var package = new AJAXPacket("${ctx}/sysrole/save");
            package.data.data = data;
            core.ajax.sendPacket(package, function (response) {
                if (response.data.success) {
                    alertMsg.correct("成功！");
                    var keyWord = $("#editForm input[name=roleName]").val();
                    jumpMenu('${ctx}/sysrole/page?keyWord=' + keyWord);
                } else {
                    alertMsg.error(response.data.errMsg);
                }
            });
            package = null;
        });
        $("#cancelBtn").bind("click", function () {
            $('#selectable-output').empty();
        });
    });

    function getMenus(id) {
        var package = new AJAXPacket("${ctx}/sysrole/getMenus");
        package.data.add("id", id);
        core.ajax.sendPacketHtml(package, function (data) {
            $("#role_form_data").html(data);
        });
        package = null;
    }

    function edit(id) {
        var package = new AJAXPacket("${ctx}/sysrole/edit");
        package.data.add("id", id);
        core.ajax.sendPacketHtml(package, function (data) {
            $("#selectable-output").html(data);
        });
        package = null;
    }

    function del(id) {
        var del = function () {
            var package = new AJAXPacket("${ctx}/sysrole/delete");
            package.data.add("id", id);
            core.ajax.sendPacket(package, function (response) {
                if (response.data.success) {
                    alertMsg.correct("成功！");
                    jumpMenu('${ctx}/sysrole/page');
                } else {
                    alertMsg.error(response.data.errMsg);
                }
            });
            package = null;
        }
        alertMsg.confirm('确定执行此删除操作吗？', del);
    }
</script>